<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机整数操作</title>
    <style>
        button{
            border-radius: 10px;
            padding: 5px 8px;
            border: 2px solid #ccc;
            border-width:2px 5px;
        }
    </style>
</head>
<body>
    <h3>随机产生20个四位整数并从小到大进行排序</h3>
    <textarea id="result" rows="8" cols="50"></textarea><br>
    <button id="generateBtn">随机产生20个整数</button>
    <button id="filterBtn">找出能被5整除的整数</button>
    <button id="resetBtn">重置</button>

    <script>
        const generateBtn = document.getElementById('generateBtn');
        const filterBtn = document.getElementById('filterBtn');
        const resetBtn = document.getElementById('resetBtn');
        const resultTextarea = document.getElementById('result');

        let numbers = [];

        function generateAndSortNumbers() {
            numbers = [];
            for(let i = 0; i < 20; i++) {
                let num = Math.floor(Math.random() * 9000 + 1000);
                numbers.push(num);
            }

            // 保存原始数组的副本
            const originalNumbers = [...numbers];

            // 对数组进行排序
            numbers.sort((a, b) => a - b);

            let output = "随机产生20个4位整数，分别如下\n";
            output += originalNumbers.join('\n');
            output += "\n从小到大排序后结果为：\n";
            output += numbers.join('\n');
            resultTextarea.value = output;
        }

        function filterDivisibleByFive() {
            if (numbers.length === 0) {
                alert("请先生成随机数！");
                return;
            }

            const divisibleByFive = numbers.filter(num => num % 5 === 0);
            let output = "能被5整除的整数有：\n";
            output += divisibleByFive.join('\n');
            resultTextarea.value = output;
        }

        function resetAll() {
            numbers = [];
            resultTextarea.value = "";
        }

        generateBtn.addEventListener('click', generateAndSortNumbers);
        filterBtn.addEventListener('click', filterDivisibleByFive);
        resetBtn.addEventListener('click', resetAll);
    </script>
</body>
</html>